<template>
    <div >
        <div class="areaNav"><span class="area_nav_tab" :class="{area_nav_tab_active:tabShow}" @click="changeTab(0)">商圈</span><span class="area_nav_tab" :class="{area_nav_tab_active:!tabShow}" @click="changeTab(1)">地铁站</span></div>
        <div class="tab_box">
            <!-- 行政区 -->
             <template v-if="tabShow">
                <div class="district_list"> 
                    <div class="district_item" v-for="(item,index) in filterCinemas.district.subItems" :key="item.id" :class="{checked:districtIndex == index}" @click="checkDistrict(index)">
                        <span>{{item.name}}</span>
                        <span>{{item.count}}<i class="el-icon-arrow-right right"></i></span>
                    </div>
                </div>
            </template>
            <!-- 地铁 -->
             <template v-if="!tabShow">
                <div class="district_list"> 
                    <div class="district_item" v-for="(item,index) in filterCinemas.subway.subItems" :key="item.id" :class="{checked:subwayIndex == index}" @click="checkSubway(index)">
                        <span>{{item.name}}</span>
                        <span>{{item.count}}<i class="el-icon-arrow-right right"></i></span>
                    </div>
                </div>
            </template>


            <div class="area_list_box">
                <!-- 行政区 -->
                <template v-if="tabShow">
                    <div class="area_list" v-for="(item,index1) in brandList" :key="index1" :data="index1" v-if="areaListIndex == index1" >
                        <template v-if="item">
                            <div class="area_item" v-for="(items,index2) in item" :key="index2"  @click="changeDistrict(items,index1,index2)" >
                                <span :class="{checked2:areaIndex == index2}" >{{items.name}}</span>
                                <span>{{items.count}}</span>
                            </div>
                        </template>
                        <div v-else></div>
                    </div>
                </template>
                <!-- 地铁 -->
                <template v-if="!tabShow">
                    <div class="area_list" v-for="(item,index1) in subwayList" :key="index1" :data="index1" v-if="stationListIndex == index1" >
                        <template v-if="item">
                            <div class="area_item" v-for="(items,index2) in item" :key="index2" @click="changeStation(items,index1,index2)" >
                                <span :class="{checked2:stationIndex == index2}">{{items.name}}</span>
                                <span>{{items.count}}</span>
                            </div>
                        </template>
                        <div v-else></div>
                    </div>
                </template>
           </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tabShow:true,
            brandList:[],
            subwayList:[],

            districtIndex:0,
            areaListIndex:0,
            areaIndex:0,

            subwayIndex:0,
            stationListIndex:0,
            stationIndex:0
            
        }
    },
    props: ["filterCinemas"],
    mounted () {
        this.brandList = this.filterList(this.filterCinemas.district.subItems);
        this.subwayList = this.filterList(this.filterCinemas.subway.subItems);
    },
    methods: {

        // 筛选二级列表方法
        filterList(_list) {
            let list= [];
            if ( _list ) {
                for(let i=0 ;i<_list.length;i++) {
                    if(!_list[i]['subItems']) {
                        list[i]= ['']
                    } 
                    list[i] = _list [i]['subItems']
                }  
               
            }
            return list
        },

        changeTab(index) {
            this.tabShow = index ? false : true;
            window.localStorage.setItem('tabShow',index);
            
        },
        // 行政区域切换
        checkDistrict(index) {
             this.areaIndex = this.districtIndex == index ? this.areaIndex : -1;
             this.districtIndex = index;
             this.areaListIndex = index;
            
             let list =this.filterCinemas.district.subItems;
             if( !list[index].subItems ) {
                this.$emit('change-district',{district:list[index],area:''});
             }
        },
        changeDistrict(item,index,index2) {
            this.areaIndex = index2; 
            
            let list = this.filterCinemas.district.subItems;
          
            this.$emit('change-district',{district:list[index],area:item});
        },

        // 地铁切换
        checkSubway(index) {
             this.stationIndex = this.subwayIndex == index ? this.stationIndex : -1;
             this.subwayIndex = index;
             this.stationListIndex = index;

             let list =this.filterCinemas.subway.subItems;
             if( !list[index].subItems ) {
               
                this.$emit('change-subway',{subway:list[index],station:''});
             }
        },
        changeStation(item,index,index2) {
            this.stationIndex = index2; 
            let list = this.filterCinemas.subway.subItems;
           
            this.$emit('change-subway',{subway:list[index],station:item});
        }
    }
}
</script>
<style scoped>
    .areaNav {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        border-bottom: 1px solid #f2f2f2;
    }
    .areaNav span{
        width: 20%;
        text-align: center;
        line-height: 30px
       
    }
    .area_nav_tab{
         border-bottom: 2px solid #fff;
    }
    .area_nav_tab_active{
         border-bottom: 2px solid #F34D41;
    }
    .tab_box{width: 100%;height: 368px;color: #777;display: flex;flex-direction: row;}
    .district_list{width: 36%;height: 100%;flex-shrink: 0;background: #f0f0f0;overflow: auto}
    .district_item{padding: 12px 10px 8px 15px;display: flex;flex-direction: row;justify-content: space-between;}

    .area_list_box{height: 368px;flex-grow: 1;background: #fff;}
    .area_list {height: 100%;overflow: auto}
    .area_item{padding: 12px 10px 8px 15px;display: flex;flex-direction: row;justify-content: space-between;}
    .checked{background: #fff;}
    .checked2{color:#F34D41}
    .right{color: #777;}
</style>